<!-- **注意： 设置编码格式为UTF-8** -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
    <%--<script type = "text/javascript" src="${pageContext.request.contextPath}/common/echarts.min.js"></script>--%>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>

    <script type="text/javascript">

        function drawBar() { //在按钮里面，在ajax里面都可以
            // 基于准备好的dom(即div)，初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));//这里只引入echarts.min.js 3.72版本就可以了，因为你引入整个echarts,echars不变蓝色，不可以直接用
            var myChart2 = echarts.init(document.getElementById('main2'));
            //你可以写多个option,柱状图,扇形图,相邻的option分好结束,分别为每个echarts对象(即每个div)加载数据  即myChart.setOption(option);写多遍
            var option = {
                title:{
                    text:'ECharts之折线图,柱状图'
//                    left:'center'
                },
                //提示框组件 X轴触发,对折线图,柱状图有效,可以看到横纵坐标的值
                tooltip:{
                    show: true,
                    //坐标轴触发，主要用于柱状图，折线图等
                    trigger:'axis'
                },
                //图例
                legend: {
                    data: ['销量', '价格'],//该属性相当于标题，虽然这里写了'价格'，但下面的series没有价格这一列，就不展示了,所以,一般要和下面的价格一致
                    align: 'left'
                },

                toolbox: {//不写show: true默认是show: true
                    show: true,//这里为false，没有该属性默认是show: true
                    feature: {
                        mark: {show: true},//添加辅助线开关，辅助线删除，辅助线清空3个按钮
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},//增加了4个按钮 启用的动态类型（折线图，柱状图，堆叠，平铺）
                        restore: {show: true},//添加了1个还原按钮，点击重新加载柱状图
                        dataView: {show: true},//点击查看数据
                        saveAsImage: {
                            show: true,//不写,默认也是有的
                            pixelRatio: 2

                        }
                    }
                },
                xAxis: [       //x轴的内容
                    {
                        type: 'category',
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    }
                ],
                yAxis: [       //y轴的内容
                    {
                        type: 'value'
                    }
                ],
                //系列列表。每个系列通过type决定自己的图表类型
                series: [
                    {
                        name: '销量',
                        type: 'line',//展示为折现
                        stack: '总量',
                        data: [5, 20, 80, 10, 10, 20]
                    },
                    {
                        name: '价格',
                        type: 'bar',//展示为柱状图
                        stack: '总量',
                        data: [10, 40, 160, 20, 20, 20]  //这里不能加双引号,或者你直接写变量dataList
                    }
                ]
            };

            var option2 = {
                title:{
                    text:'ECharts数据统计',
                    left:'center',//25%也可以
                },
                series:[{
                    name:'访问量',
                    type:'pie',
                    radius:'60%',  //控制了扇形图的大小
                    center: ['50%', '60%'],  //这个属性设置图的上下左右的位置
                    data:[
                        {value:500,name:'Android'},//数字占比
                        {value:200,name:'IOS'},
                        {value:360,name:'PC'},
                        {value:100,name:'Ohter'}
                    ]
                }]
            };
            //改变窗口大小使图标自适应窗口显示
            window.onresize = function () {
                myChart.resize();
                myChart2.resize();
            }
            // 为2个echarts对象(即2个div)加载数据
            myChart.setOption(option);
            myChart2.setOption(option2);
        }
    </script>
</head>

<body>
<button id=drawBar onClick="drawBar()">画统计图表</button>
<div id="main" style="height:400px"></div>
<div id="main2" style="height:400px"></div>
</body>
</html>